<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <input type="text" v-model="person.song">
    </div>
    <script src="./node_modules/vue/dist/vue.js"></script>
    <script>


        //需求： 必须监视person, 而且还要在song发生变化的时候，触发监视函数

        //监视一个对象，在对象内部的内容发生变化的时候，也需要监视到变化
        // 深度监视： 需要设置deep属性为true


        var vm = new Vue({
            el: "#app",
            data: {
                person: {
                    name: "郭富城",
                    age: 58,
                    song: "对你爱爱爱不完"
                }
            },
            watch: {
                // "person.song": function(nV, oV){
                //     console.log("出新专辑了");
                // },
                person: {
                    handler(nv, ov){
                        console.log("出新专辑了");
                    },
                    //deep属性默认为false，如果是true则对象中任何内容发生变化都会触发handler函数
                    deep: true,
                    
                    //immediate默认为false, 如果是true会在监视刚一生效就直接执行一次handler函数
                    immediate: true
                }
            }
        })

    </script>
</body>

</html>